<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
    1.先完成结构
    2.重置样式(body/a/ul/...)
    3.先整体, 后局部
        * 按照结构的顺序 从外往里  从上往下
    4.去除重复的代码
        *将重复的逻辑放到一个单独的class中
        *不同的代码抽到不同的class(.new  .hot)
    */
    body,ul,li,a{
        padding: 0;
        margin: 0;
    }
    ul,li,ol{
        list-style: none;
    }
    a{
        text-decoration: none;
        color: #333;
    }
    ul > li > a{
        display: inline-block;
    }
    ul > li{
        margin: 15px 0;
    }
    ul > li > a:hover{
        color: #f00;
    }
    /* 局部 */
    ul > li .ranking{
        display: inline-block;
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        font-weight: 700;
        color: #999;
        margin-right: 5px;
    }
    /* 伪类:结构伪类 */
    ul > li:nth-child(1) .ranking{
        color: #f00;
    }
    ul > li:nth-child(2) .ranking{
        color: rgb(200, 255, 0);
    }
    ul > li:nth-child(3) .ranking{
        color: rgb(0, 183, 255);
    }
    /* 内容相关 */
    ul > li  .content{
        display: inline-block;
    }
    /* 图标相关 */
    ul > li .icon{
        position: relative;
        top:2px;
        display: inline-block;
        width: 16px;
        height: 16px;
    }
    ul > li .new{
        background-image: url("./imgs/new.svg");
    }
    ul > li .hot{
        background-image: url('https://lf3-cdn2-tos.bytescm.com/toutiao/toutiao_web_pc/svgs/hot.92a15c5e.svg');
    }
</style>
<body>
    <ul>
        <li>
            <a href="#">
                <span class="ranking">1</span>
                <div class="content">一花一世界,明媚春天,杜鹃花开满枝头,色彩艳丽,繁花似锦</div>
                <i class="icon"> </i>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="ranking">2</span>
                <div class="content">一花一世界,明媚春天,杜鹃花开满枝头,色彩艳丽,繁花似锦</div>
                <i class="icon new"></i>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="ranking">3</span>
                <div class="content">一花一世界,明媚春天,杜鹃花开满枝头,色彩艳丽,繁花似锦</div>
                <i class="icon"> </i>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="ranking">4</span>
                <div class="content">一花一世界,明媚春天,杜鹃花开满枝头,色彩艳丽,繁花似锦</div>
                <i class="icon hot"> </i>
            </a>
        </li>
    </ul>
</body>
</html>